<template>
	<view class="mains">
		<view class="top">
			<view class="top_title">
				您为目标患者生成的随访任务【{{title}}】已触发，请查看患者并跟进随访任务！
			</view>
			<!-- <view class="search">
				<search-top style="" placeholder="请输入关键词" @mySearch="mySearch"></search-top>
			</view> -->
		</view>
		<view class="box">
			<view class="box_tips">
				患者列表（{{list.length}}）
			</view>
			<view class="box_content">
				<view class="box_card" v-for="n in list" :key="n.externalUserId">
					<view class="left_card">
						<view class="card_title" v-if="n.healthCardName">
							{{n.healthCardName}}（{{n.nickName}}<span style="color: #36B278;" :class="{orange:n.type==2}">{{conTools(n.type)}}</span>)
						</view>
						<view class="card_title" v-if="!n.healthCardName">
							{{n.nickName}}<span style="color: #36B278;" :class="{orange:n.type==2}">{{conTools(n.type)}}</span>
						</view>
						<view class="" v-if="n.failureDesc">
							失败原因:{{n.failureDesc}}
						</view>
						<view class="p-t-8 p-b-20">
							推送时间:{{n.createTime}}
						</view>

					</view>
					<view class="right_card">
						<u-button size="mini" :custom-style="sendStyle" @click="sendMsg(n.externalUserId)" v-if="n.xcxStatus == 0">发送</u-button>
						<u-button size="mini" :custom-style="done" v-if="n.xcxStatus == 1">已发送</u-button>
					</view>
				</view>

				<view class="empty" v-if="empty">
					<u-image width="273rpx" height="273rpx" :src="emptyImg"></u-image>
					<view class="txt">
						暂无执行结果
					</view>
				</view>

			</view>
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getFollowupPlanJobRecordDetail
	} from '@/api/index.js'
	import register from '@/utils/register'
	export default {
		data() {
			return {
				sendStyle: {
					background: '#4DC0D9', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'white',
					fontSize: '28rpx',
					width:'108rpx'
				},
				done: {
					background: '#4DC0D9', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'white',
					fontSize: '28rpx',
					opacity: '0.5',
					width:'108rpx'
				},
				emptyImg: require('@/static/img/empty_hcem.png'),
				empty: false,
				jobId: '',
				list: [],
				title: ''
			};
		},
		computed:{
			conTools(type){
				return (type)=>{
					if(type == 1){
						return '@微信'
					}
					if(type == 2){
						return '@企业微信'
					}
					return ''
				}
			}
		},
		onLoad(obj) {
			if (obj.jobId) {
				this.jobId = obj.jobId
				this.getData()
			}
		},
		methods: {
			async sendMsg(externalUserId) {
				await register(['openEnterpriseChat'])
				await this.$ww.openEnterpriseChat({
					// groupName: '讨论组',
					//wmdaLeBwAAMOjyXoWA85Pqeihl-qCLSg   true
					externalUserIds: [externalUserId],
					//wmdaLeBwAAOmbr9NZmCwQka8X1Do2PkQ
				})
			},
			mySearch(val) {
				console.log(val);
			},
			async getData() {
				let res = await getFollowupPlanJobRecordDetail(this.jobId)
				if (res.code == 200) {
					this.list = res.followupRecordJobList
					this.title = res.jobName
				} else {
					this.$u.toast(res.msg, 3000)
				}
				console.log(res, 'res');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mains {
		min-height: 120vh;
		background-color: #f8f8f8;

		.top {
			background-color: white;

			//margin-bottom: 20rpx;
			.top_title {
				font-weight: 500;
				font-size: 28rpx;
				color: #4DC0D9;
				line-height: 33rpx;
				background: #EEFCFF;
				padding: 20rpx 24rpx;
			}

			.search {
				background-color: white;
				padding-bottom: 1px;
			}
		}

		.box {
			.box_tips {
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
				padding: 20rpx 24rpx;
			}

			.box_content {
				.box_card {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: white;
					margin: 0 24rpx 20rpx 24rpx;
					border-radius: 20rpx;

					.left_card {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 33rpx;
						padding: 0 24rpx;

						.card_title {
							font-weight: bold;
							font-size: 32rpx;
							color: #212121;
							line-height: 38rpx;
							padding-bottom: 20rpx;
							padding-top: 20rpx;
						}
					}

					.right_card {
						padding-right: 24rpx;
					}
				}

				.empty {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding-top: 330rpx;

					.txt {
						font-weight: 500;
						font-size: 32rpx;
						color: #C7C7C7;
						padding-top: 40rpx;
						line-height: 38rpx;
					}
				}
			}
		}
		.orange{
			color: #F0A415 !important;
		}
	}
</style>